<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="extensionName">表单数据保存</title>
    <link rel="stylesheet" href="css/styles.css">
    <style>
        body {
            width: 380px;
            margin: 0;
            padding: 16px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f9fafb;
        }

        .status-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            padding: 12px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .status-label {
            font-size: 14px;
            color: #4b5563;
        }

        #currentStatus {
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 500;
            font-size: 14px;
            color: white;
        }

        .enabled {
            background-color: #16a34a;
        }

        .disabled {
            background-color: #4b5563;
        }

        .button-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-bottom: 16px;
        }

        .grid-button {
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            color: white;
        }

        .primary-button {
            background-color: #2563eb;
        }

        .primary-button:hover {
            background-color: #1d4ed8;
        }

        .success-button {
            background-color: #16a34a;
        }

        .success-button:hover {
            background-color: #4ea36d;
        }

        .warning-button {
            background-color: #f59e0b;
        }

        .warning-button:hover {
            background-color: #d97706;
        }

        .danger-button {
            background-color: #dc2626;
        }

        .danger-button:hover {
            background-color: #b91c1c;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #1f2937;
            margin: 16px 0 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e5e7eb;
        }

        #savedData {
            max-height: 400px;
            overflow-y: auto;
            padding-right: 4px;
        }

        .refresh-button {
            background: none;
            border: none;
            padding: 4px;
            cursor: pointer;
            color: #6b7280;
            transition: color 0.2s;
        }

        .refresh-button:hover {
            color: #4b5563;
        }

        .notification {
            height: 30px;
            position: fixed;
            bottom: 8px;  /* 改小底部距离 */
            left: 50%;
            transform: translateX(-50%);
            padding: 6px 12px;  /* 减小内边距 */
            border-radius: 4px;  /* 减小圆角 */
            font-size: 13px;  /* 减小字体大小 */
            transition: opacity 0.2s;
            z-index: 1000;
            color: white;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);  /* 减小阴影 */
            line-height: 1.3;  /* 添加行高控制 */
            max-width: 90%;  /* 添加最大宽度限制 */
            white-space: nowrap;  /* 防止文本换行 */
            overflow: hidden;  /* 隐藏溢出部分 */
            text-overflow: ellipsis;  /* 显示省略号 */
        }

        .notification.info {
            background-color: #3b82f6;
        }

        .notification.success {
            background-color: #10b981;
        }

        .notification.warning {
            background-color: #f59e0b;
        }

        .notification.error {
            background-color: #ef4444;
        }

        .notification.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .animate-spin {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        /* 自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        .language-select {
            margin: 8px 0;
            padding: 8px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .language-select select {
            flex: 1;
            padding: 4px 8px;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            font-size: 14px;
            color: #374151;
            background-color: #f9fafb;
        }

        .language-select label {
            font-size: 14px;
            color: #4b5563;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="status-container">
        <span class="status-label" data-i18n="currentPageStatus">当前页面状态：</span>
        <div id="currentStatus" data-i18n="checking">检查中...</div>
    </div>

    <div class="button-container">
        <button id="toggleCurrentPage" class="grid-button success-button" disabled data-i18n="enable">启用</button>
        <button id="toggleUrlButton" class="grid-button primary-button" data-i18n="add">添加</button>
        <button id="openSettings" class="grid-button primary-button" style="grid-column: span 2;" data-i18n="settings">设置</button>
    </div>

    <div class="language-select">
        <label data-i18n="selectLanguage">选择语言：</label>
        <select id="languageSelect" class="w-full">
            <option value="zh_CN" data-i18n="chinese">中文</option>
            <option value="en" data-i18n="english">English</option>
        </select>
    </div>

    <div class="section-header">
        <div class="flex items-center justify-between">
            <h3 class="section-title" data-i18n="savedData">已保存的数据</h3>
            <button id="refreshData" class="refresh-button" data-i18n-title="refresh" title="刷新数据">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.3"/>
                </svg>
            </button>
        </div>
    </div>

    <div id="savedData">
        <div class="text-gray-500 text-center py-3" data-i18n="loading">加载中...</div>
    </div>

    <div id="notification" class="notification hidden"></div>
    <script src="./libs/lucide.js"></script>
    <script src="popup.js"></script>
</body>
</html>